<template>
  <div ref="pie" :class="className" :style="{ height: height, width: width }" />
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { reSize } from './hooks/resize'
const props = withDefaults(
  defineProps<{
    className?: string
    width?: string
    height?: string
  }>(),
  {
    className: 'chart',
    width: '100%',
    height: '350px',
  }
)
let pie = ref()
let charts: echarts.ECharts | null
const init = () => {
  charts = echarts.init(pie.value)
  charts.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
      left: 'center',
      bottom: '10',
      data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'],
    },
    series: [
      {
        name: 'WEEKLY WRITE ARTICLES',
        type: 'pie',
        roseType: 'radius',
        radius: [15, 95],
        center: ['50%', '38%'],
        data: [
          { value: 320, name: 'Industries' },
          { value: 240, name: 'Technology' },
          { value: 149, name: 'Forex' },
          { value: 100, name: 'Gold' },
          { value: 59, name: 'Forecasts' },
        ],
        animationEasing: 'cubicInOut',
        animationDuration: 2600,
      },
    ],
  })
  reSize(charts)
}
onMounted(() => {
  init()
})
onBeforeUnmount(() => {
  if (!charts) {
    return
  }
  charts.dispose()
  charts = null
})
</script>